<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .box{
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <!-- <div class="box" onclick="alert(11111)"></div> -->
    <div class="box" ></div>
</body>
<script>
    /* 
    给元素绑的事件的常见方式
    (1)  内联JS绑定事件   => 很少用,后期维护不方便
    (2)  DOM一级事件   => 赋值式, 一个元素只能绑定一种相同类型的事件,重新赋值会覆盖
    (3)  DOM二级事件(事件监听/侦听)   =>  回调函数, 可以给一个元素绑的多个相同类型的事件, 
        Element.addEventListener(type,callback,isCapture)   添加事件监听
        Element    绑定事件的元素
        type       绑定事件的类型 (click dblclick keydown keyup)
        callback   事件触发时的处理函数
        isCapture  是否以事件捕获方式触发事件(默认false)
        
        
    */


    var box = document.querySelector(".box");

    // (2)  DOM一级事件 
    // box.onclick = function(){
    //     alert(11111);
    // }

    // box.onclick = function(){
    //     alert(22222);
    // }


    // (3) DOM二级事件(事件监听/侦听)

    box.addEventListener("click",function(){
        alert(11111);
    })

    box.addEventListener("click",function(){
        // this -> box  事件中的this指向绑的事件的元素
        this.style.backgroundColor = randColor();
    })

    box.addEventListener("click",function(){
        console.log("3333");
    })




    function randColor(){
        function randNum(){ // 随机0-255的数
            return Math.floor(Math.random()*256);
        }
        return `rgb(${randNum()},${randNum()},${randNum()})`
    }

</script>
</html>